<template>
  <div class="summary" flex>
    <Panel>
      <template slot="inner">
        <div flex="main:justify dir:top" style="height: 100%;">
          <Card>
            <template slot="title">
              <span>本月数据分析</span>
            </template>
            <template slot="content">
              <div flex="main:justify">
              <span class="count-wrapper-item" flex="main:justify dir:top">
              <img src="~@/assets/images/summary/icon_01.png" alt="">
              <i class="font">归集数量</i>
              <p><i class="num">{{month.collection}}</i><i class="white-font">（条）</i></p>
            </span>
                <span class="count-wrapper-item" flex="main:justify dir:top">
              <img src="~@/assets/images/summary/icon_02.png" alt="">
              <i class="font">上报数据量</i>
              <p><i class="num">{{month.submit}}</i><i class="white-font">（条）</i></p>
            </span>
                <span class="count-wrapper-item" flex="main:justify dir:top">
              <img src="~@/assets/images/summary/icon_03.png" alt="">
              <i class="font">回流数据量</i>
              <p><i class="num">{{month.reflux}}</i><i class="white-font">（条）</i></p>
            </span>
              </div>
            </template>
          </Card>
          <Card>
            <template slot="title">
              <span>资源信息分类统计</span>
            </template>
            <template slot="content">
              <div flex="main:justify">
                <span class="count-wrapper-item" flex="main:justify dir:top">
                  <i class="font">一级分类</i>
                  <p><i class="num">{{classify.lv1}}</i><i class="white-font">（条）</i></p>
                </span>
                <span class="count-wrapper-item" flex="main:justify dir:top">
                  <i class="font">二级分类</i>
                  <p><i class="num">{{classify.lv2}}</i><i class="white-font">（条）</i></p>
                </span>
                <span class="count-wrapper-item" flex="main:justify dir:top">
                  <i class="font">资源数</i>
                  <p><i class="num">{{classify.resourceCount}}</i><i class="white-font">（条）</i></p>
                </span>
                <span class="count-wrapper-item" flex="main:justify dir:top">
                  <i class="font">部门数</i>
                  <p><i class="num">{{classify.deptCount}}</i><i class="white-font">（个）</i></p>
                </span>
              </div>
              <div>
                <chart ref="chart1" :options="returnBar(classify.chartData)" style="width: 100%; height: 220px;"></chart>
              </div>
            </template>
          </Card>
          <Card>
            <template slot="title">
              <div flex="main:justify">
                <span>资源信息分类统计</span>
                <span class="handle-date" flex="main:justify">
                <i class="tab" :class="dateTab === 0 ? 'active' : ''" @click="dateTab = 0">本月</i>
                <i class="tab" :class="dateTab === 1 ? 'active' : ''" @click="dateTab = 1">本年</i>
                <b-date-picker
                  placement="bottom-end"
                  :open="open"
                  :value="date"
                  confirm
                  @on-change="handleChange"
                  @on-clear="handleClear"
                  @on-ok="handleOk">
                    <a href="javascript:void(0)" @click="handleClick">
                      <template v-if="date === ''">请选择日期</template>
                      <template v-else>{{ date }}</template>
                    </a>
                  </b-date-picker
                  >
              </span>
              </div>
            </template>
            <template slot="content">
              <div class="table">
                <div class="table-row" flex="main:justify">
                  <span>部门名称</span>
                  <span>归集数量（条）</span>
                  <span>占比</span>
                </div>
                <div class="table-row" v-for="(item, index) in classifyList" :key="index" flex="main:justify">
                  <span>{{ item.name }}</span>
                  <span>{{ item.count }}</span>
                  <span>{{ item.percent }}%</span>
                </div>
              </div>
            </template>
          </Card>
        </div>
      </template>
    </Panel>
    <Panel style="padding-left: 0; padding-right: 0;" flex="main:justify dir:top">
      <template slot="outer">
        <div flex="dir:top" style="width: 100%;">
          <div class="outer-wrapper">
            <div class="tip-wrapper" flex="space:around">
              <div class="tip-item">
                <div class="tip-item-inner" flex="space:around cross:center">
                  <img src="~@/assets/images/summary/icon_zyxx.png" alt="">
                  <span class="tip-item-font">
                  <i>资源信息数量</i><br>
                  <i class="num">{{resource.resourceCount}}</i><i>（条）</i>
                </span>
                </div>
                <span class="light-corner"></span>
                <span class="light-corner"></span>
                <span class="light-corner"></span>
                <span class="light-corner"></span>
              </div>
              <div class="tip-item">
                <div class="tip-item-inner" flex="space:around cross:center">
                  <img src="~@/assets/images/summary/icon_sjgj.png" alt="">
                  <span class="tip-item-font">
                  <i>数据归集数量</i><br>
                  <i class="num">{{resource.dataCount}}</i><i>（条）</i>
                </span>
                </div>
                <span class="light-corner"></span>
                <span class="light-corner"></span>
                <span class="light-corner"></span>
                <span class="light-corner"></span>
              </div>
              <div class="tip-item">

                <div class="tip-item-inner" flex="space:around cross:center">
                  <img src="~@/assets/images/summary/icon_bygj.png" alt="">
                  <span class="tip-item-font">
                  <i>本月归集数量</i><br>
                  <i class="num">{{resource.monthCount}}</i><i>（条）</i>
                </span>
                </div>
                <span class="light-corner"></span>
                <span class="light-corner"></span>
                <span class="light-corner"></span>
                <span class="light-corner"></span>
              </div>
            </div>
          </div>
          <div class="outer-wrapper">
            <div id="map"></div>
            <div class="mask-cir-container">
              <div class="mask-inner">
                <div class="rotate-cir-1"></div>
                <div class="rotate-cir-2"></div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </Panel>
    <Panel>
      <template slot="inner">
        <div flex="main:justify dir:top" style="height: 100%;">
          <Card>
            <template slot="title">
              <span>数据归集来源对比</span>
            </template>
            <template slot="content">
              <chart ref="chart3" :options="returnRose(sourceData)" style="width: 100%; height: 280px;"></chart>
            </template>
          </Card>
          <Card>
            <template slot="title">
              <div flex="main:justify">
                <span>{{chartTab===0? '自然人':'法人'}}资源数据分类统计</span>
                <span class="handle-date" flex="main:justify">
                  <i class="tab active" v-show="chartTab === 0" @click="chartTab = 1"><i class="iconfont icon-ios-repeat"
                                                                                       style="color: #00cbfe; font-size: 18px; vertical-align: top"></i>法人</i>
                  <i class="tab active" v-show="chartTab === 1" @click="chartTab = 0"><i class="iconfont icon-ios-repeat"
                                                                                       style="color: #00cbfe; font-size: 18px; vertical-align: top"></i>自然人</i>
                </span>
              </div>
            </template>
            <template slot="content">
              <chart ref="chart4" :options="returnPie(naturalPersonData)" style="width: 100%; height: 280px;"></chart>
            </template>
          </Card>
          <Card>
            <template slot="title">
              <span>最新填报部门</span>
            </template>
            <template slot="content">
              <div class="table">
                <div class="table-row" flex="main:justify">
                  <span>部门名称</span>
                  <span>资源信息（条）</span>
                </div>
                <div class="table-row" v-for="(item, index) in newestList" :key="index" flex="main:justify">
                  <span>{{ item.name }}</span>
                  <span>{{ item.count }}</span>
                </div>
              </div>
            </template>
          </Card>
        </div>
      </template>
    </Panel>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import echarts from 'echarts'
  import Panel from '../../../components/Panel/Panel'
  import Card from '../../../components/Card/Card'
  import 'echarts/map/js/china'
  // 统一变量
  const xyLineColor = '#535e83'
  const splitLineColor = '#283353'
  export default {
    name: 'SummaryMap',
    data() {
      return {
        open: false,
        date: '',
        dateTab: 0,
        chartTab: 0
      }
    },
    mounted() {
      // this.renderBall()
      this.renderMap({ id: 'map',mapData: this.mapData})
      this.$store.dispatch('getMap')
    },
    computed: {
      ...mapState({
        month: state => state.map.month,
        classify: state => state.map.classify,
        classifyList: state => state.map.classifyList,
        resource: state => state.map.resource,
        mapData: state => state.map.mapData,
        sourceData: state => state.map.sourceData,
        naturalPersonData: state => state.map.naturalPersonData,
        newestList: state => state.map.newestList,
      })
    },
    components: {
      Panel,
      Card
    },
    methods: {
      handleClick() {
        this.open = !this.open
      },
      handleChange(date) {
        this.date = date
      },
      handleClear() {
        this.open = false
      },
      handleOk() {
        this.open = false
      },
      renderBall() {
        function render() {
          const container = document.getElementById('cvsBg')
          const w = container.clientWidth
          const h = container.clientHeight
          const cameraDeg = 45
          const aspect = w / h
          const near = 0.1
          const far = 10000
          const renderer = new THREE.WebGLRenderer({ alpha: true })
          const camera = new THREE.PerspectiveCamera(
            cameraDeg, aspect, near, far
          )

          const scene = new THREE.Scene()
          renderer.setClearColor(0xffffff, 0)
          renderer.setSize(w, h)

          // 附加DOM元素
          container.append(renderer.domElement)

          // 设置球体的值
          let radius = 72
          let segemnt = 60
          let rings = 60
          let sphereGeometry = new THREE.SphereGeometry(radius, segemnt, rings)
          let pMaterial = new THREE.PointsMaterial({
            color: 0xffffff,
            vertexColors: true,
            size: 1
          })
          let sphere = new THREE.Mesh(
            sphereGeometry
          )

          let particleSystem = new THREE.Points(sphereGeometry, pMaterial)

          // let pivotPoint = new THREE.Object3D();// 3d效果
          // sphere.castShadow = sphere.receiveShadow = true
          // sphere.rotation.x = 45
          // sphere.position.x = 0
          // sphere.position.y = 0
          // sphere.add(pivotPoint)// 球 添加3d效果

          let spotLight = new THREE.SpotLight('#ffffff')
          spotLight.position.set(-50, 50, 150)
          spotLight.castShadow = true
          spotLight.target = sphere
          spotLight.distance = 0
          spotLight.angle = 0.8

          let helper = new THREE.DirectionalLightHelper(spotLight, 50, 0xFFFFFF)

          camera.position.x = 0
          camera.position.y = 0
          camera.position.z = 400
          camera.lookAt(scene.position)

          scene.add(camera)
          scene.add(spotLight)
          scene.add(particleSystem)
          // scene.add(sphere)
          // scene.add(helper)

          function animate() {
            requestAnimationFrame(animate)
            particleSystem.rotation.y += 0.001
            renderer.render(scene, camera)
          }

          animate()
        }

        let init = () => {
          render()
        }
        init()
        window.onresize = init
      },
      returnBar(data){
        return {
          color: '#00abfb',
            tooltip: {
            trigger: 'axis',
              axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
              right: '12%',
              bottom: '6%',
              top: '3%',
              containLabel: true
          },
          dataset: {
            source: data
          },
          xAxis: {
            type: 'value',
              boundaryGap: [0, 0.01],
              axisLine: {
              lineStyle: {
                color: xyLineColor
              }
            },
            splitLine: { lineStyle: { color: splitLineColor } },
            name: '(条)'
          },
          yAxis: {
            type: 'category',
              axisLine: {
              lineStyle: {
                color: xyLineColor
              }
            }
          },
          series: [
            {
              type: 'bar',
              showBackground: true,
              barWidth: 10,
              itemStyle: {
                barBorderRadius: 8,
                color: new echarts.graphic.LinearGradient(
                  0, 0, 1, 0,
                  [
                    { offset: 0, color: '#2380f2' },
                    { offset: 1, color: '#39BBF3' }
                  ]
                )
              }
            }
          ]
        }
      },
      returnRose(data){
        return {
          color: ['#fbd860', '#35afc6', '#1f74f1', '#00cbfe'],
            tooltip: {
            trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          series: [
            {
              name: '面积模式',
              type: 'pie',
              radius: [30, 100],
              center: ['50%', '50%'],
              roseType: 'area',
              data: data
            }
          ]
        }
      },
      returnPie(data){
        let chartData
        this.chartTab === 0 ? chartData = data.legalPerson :  chartData = data.naturalPerson
        return {
          color: ['#553cff', '#fe3b3c', '#fb952f', '#4dcea7', '#00ccff', '#0e31e3', '#1167e2'],
            tooltip: {
            trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['50%', '65%'],
              avoidLabelOverlap: false,
              label: {
                show: true,
                color: '#fff',
                lineHeight: 20,
                align: 'center',
                formatter: p => p.name + '\n' + p.value + '（条）'
              },
              labelLine: {
                show: false
              },
              data: chartData.inner
            },
            {
              name: '访问来源',
              type: 'pie',
              radius: ['0', '40%'],
              avoidLabelOverlap: false,
              label: {
                align: 'center',
                show: true,
                position: 'center',
                color: '#fff',
                lineHeight: 20,
                formatter: p => p.name + '\n  ' + p.value + '（条）'
              },
              labelLine: {
                show: false
              },
              data: chartData.outer
            }
          ]
        }
      },
      renderMap(paramObj) {
        var effect = '#06eaed'
        var flyLine = '#ffffff'
        var border = '#105689'
        var bg = 'rgba(2,10,34,0.8)'
        var bg1 = '#040c22'
        var chinaGeoCoordMap = {
          '黑龙江': [126.642464, 47.756967],
          '内蒙古': [110.3467, 41.4899],
          '吉林': [125.8154, 44.2584],
          '北京市': [116.4551, 40.2539],
          '徐州市': [117.192941, 34.269397],
          '辽宁': [123.1238, 42.1216],
          '河北': [115.4995, 38.1006],
          '天津': [117.4219, 39.4189],
          '山西': [112.3352, 37.9413],
          '陕西': [109.1162, 34.2004],
          '甘肃': [103.5901, 36.3043],
          '宁夏': [106.3586, 38.1775],
          '青海': [97.4038, 36.8207],
          '新疆': [87.617733, 43.792818],
          '西藏': [91.11, 29.97],
          '四川': [103.9526, 30.7617],
          '重庆': [108.384366, 30.439702],
          '山东': [117.1582, 36.8701],
          '河南': [113.4668, 34.6234],
          '江苏': [119.9062, 33.2208],
          '安徽': [117.29, 32.0581],
          '湖北': [114.3896, 30.6628],
          '浙江': [119.5313, 29.8773],
          '福建': [117.4543, 25.9222],
          '江西': [116.0046, 28.6633],
          '湖南': [113.0823, 28.2568],
          '贵州': [106.6992, 26.7682],
          '广东': [113.12244, 23.009505],
          '广西': [108.479, 23.1152],
          '海南': [110.3893, 19.8516],
          '上海': [121.4648, 31.2891],
          '云南': [102.712251, 25.040609]
        }
        var chinaDatas = paramObj.mapData
        var convertData = function (data) {
          var res = []
          for (var i = 0; i < data.length; i++) {
            var dataItem = data[i]
            var fromCoord = chinaGeoCoordMap[dataItem[0].name]
            // 中心点坐标
            var toCoord = [117.192941, 34.269397]
            if (fromCoord && toCoord) {
              res.push([
                {
                  coord: fromCoord,
                  value: dataItem[0].value
                },
                {
                  coord: toCoord
                }
              ])
            }
          }
          return res
        }
        var series = [];
        [['徐州市', chinaDatas]].forEach(function (item, i) {
          series.push(
            {
              type: 'lines',
              tooltip: { show: false },
              zlevel: 1,
              effect: {
                show: true,
                period: 5, // 箭头指向速度，值越小速度越快
                trailLength: 0.1, // 特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: 'arrow',
                symbolSize: [5, 10] // 图标大小
              },
              lineStyle: {
                color: flyLine,
                width: 1, // 尾迹线条宽度
                opacity: 0.1, // 尾迹线条透明度
                curveness: 0.8 // 尾迹线条曲直度
              },
              data: convertData(item[1])
            },
            {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              zlevel: 2,
              rippleEffect: { // 涟漪特效
                period: 4, // 动画时间，值越小速度越快
                brushType: 'stroke', // 波纹绘制方式 stroke, fill
                scale: 3 // 波纹圆环最大限制，值越大波纹越大
              },
              label: {
                normal: {
                  show: true,
                  position: 'right', // 显示位置
                  offset: [8, 0], // 偏移设置
                  // 圆环显示文字
                  formatter: function (params) {
                    return params.data.name
                  },
                  fontSize: 13
                },
                emphasis: {
                  show: false
                }
              },
              symbol: 'circle',
              symbolSize: function (val) {
                return 8 + val[2] * 2 // 圆环大小
              },
              itemStyle: {
                normal: {
                  show: false,
                  color: effect
                }
              },
              data: item[1].map(function (dataItem) {
                return {
                  name: dataItem[0].name,
                  value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
                }
              })
            },
            // 标的点
            {
              type: 'scatter',
              coordinateSystem: 'geo',
              zlevel: 2,
              rippleEffect: {
                period: 4,
                brushType: 'stroke',
                scale: 2
              },
              label: {
                textBorderColor: '#000',
                show: true,
                position: 'right',
                // offset:[5, 0],
                color: '#00d0ff',
                formatter: '{b}',
                textStyle: {
                  fontSize: 22,
                  color: '#fff'
                },
                // textShadowColor:'#fff',
                // textShadowBlur:2,
                emphasis: {
                  show: true,
                  color: '#f60'
                }
              },
              symbol: 'pin',
              symbolSize: 30,
              data: [{
                name: item[0],
                value: chinaGeoCoordMap[item[0]].concat([10])
              }]
            }
          )
        })
        var option = {
          tooltip: {
            trigger: 'item',
            borderColor: '#FFFFCC',
            showDelay: 0,
            hideDelay: 0,
            enterable: true,
            transitionDuration: 0,
            extraCssText: 'z-index:100',
            formatter: function (params, ticket, callback) {
              // 根据业务自己拓展要显示的内容
              var res = ''
              var name = params.name
              var value = params.value[params.seriesIndex + 1]
              res = '<span style=\'color:#fff;\'>' + name + '</span><br/>数据：' + value
              return res
            }
          },
          geo: {
            map: 'china',
            zoom: 1.2,
            label: {
              emphasis: {
                show: false
              }
            },
            roam: false, // 是否允许缩放
            itemStyle: {
              normal: {
                color: 'rgba(51, 69, 89, 0.2)', // 地图背景色
                // color:'#0f1d37',
                borderColor: border, // 省市边界线00fcff 516a89
                borderWidth: 1,
                shadowColor: bg,
                shadowBlur: 4
              },
              emphasis: {
                color: 'rgba(37, 43, 61, .5)' // 悬浮背景
              }
            }
          },
          series: series
        }
        var chart = echarts.init(document.getElementById(paramObj.id))
        chart.setOption(option)
      }
    }
  }
</script>

<style lang="stylus" scoped>
  $fontColor = #02cbff
  $bdw = 2px
  $bdh = 2px
  .green-font
    color #05f2e4

  [flex~="space:around"] {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-around;
    -ms-flex-pack: justify;
    justify-content: space-around
  }

  .summary
    height: 1000px
    padding 20px 0
    box-sizing border-box

    > div
      &:nth-child(1)
        width 460px
        padding-right: 0

      &:nth-child(2)
        width calc(100% - 920px)

      &:nth-child(3)
        width 460px
        padding-left: 0

    .panel:nth-child(2)
      >>> .light-bg
        display none
        flex none

      .outer-wrapper
        width: 100%
        height: 100px
        position relative
        &:nth-child(2)
          height: 860px
          background-image: url('~@/assets/images/map/map_bg.png')
          background-repeat: no-repeat
          background-position: center bottom
          position relative
      #map
        width: 100%
        height: 100%
        position relative
        z-index 5
      .tip-wrapper
        position absolute
        top: 0
        left: 0
        width: 100%

        .tip-item
          width: 28%
          height: 100px
          background-image: url('~@/assets/images/summary/data_bg.png')
          position relative

          .light-corner
            content: ''
            display block
            position absolute
            width 8px
            height: 8px

            &:nth-of-type(1)
              top: 0
              left: 0
              border-top: $bdh solid $fontColor
              border-left: $bdw solid $fontColor
              -webkit-border-radius: 2px 0 0 0
              -moz-border-radius: 2px 0 0 0
              border-radius: 2px 0 0 0

            &:nth-of-type(2)
              top: 0
              right: 0
              border-top: $bdh solid $fontColor
              border-right: $bdw solid $fontColor
              -webkit-border-radius: 0 2px 0 0
              -moz-border-radius: 0 2px 0 0
              border-radius: 0 2px 0 0

            &:nth-of-type(3)
              bottom: 0
              left: 0
              border-bottom: $bdh solid $fontColor
              border-left: $bdw solid $fontColor
              -webkit-border-radius: 0 0 0 2px
              -moz-border-radius: 0 0 0 2px
              border-radius: 0 0 0 2px

            &:nth-of-type(4)
              bottom: 0
              right: 0
              border-bottom: $bdh solid $fontColor
              border-right: $bdw solid $fontColor
              -webkit-border-radius: 0 0 2px 0
              -moz-border-radius: 0 0 2px 0
              border-radius: 0 0 2px 0

          .tip-item-inner
            height: 100%
            padding-left: 20px
            line-height: 30px

          &:nth-of-type(1)
            .tip-item-font
              color #17d2e8

              .num
                color inherit

          &:nth-of-type(2)
            .tip-item-font
              color #02fbec

              .num
                color inherit

          &:nth-of-type(3)
            .tip-item-font
              color #065bf7

              .num
                color inherit

      .float-tip-wrapper
        position absolute
        left: 0
        width: 100%

        .float-tip-wrapper-item
          color #fff

          > span
            padding-bottom: 6px
          animation float-tip infinite ease-in-out 6s

        &.float-1
          padding 0 160px
          top: 140px

        &.float-2
          padding 0 60px
          top: 280px

      .tip-wrapper
        position absolute
        top: 0
        left: 0
        width: 100%

        .tip-item
          width: 28%
          height: 100px
          background-image: url('~@/assets/images/summary/data_bg.png')
          position relative

          .light-corner
            content: ''
            display block
            position absolute
            width 8px
            height: 8px

            &:nth-of-type(1)
              top: 0
              left: 0
              border-top: $bdh solid $fontColor
              border-left: $bdw solid $fontColor
              -webkit-border-radius: 2px 0 0 0
              -moz-border-radius: 2px 0 0 0
              border-radius: 2px 0 0 0

            &:nth-of-type(2)
              top: 0
              right: 0
              border-top: $bdh solid $fontColor
              border-right: $bdw solid $fontColor
              -webkit-border-radius: 0 2px 0 0
              -moz-border-radius: 0 2px 0 0
              border-radius: 0 2px 0 0

            &:nth-of-type(3)
              bottom: 0
              left: 0
              border-bottom: $bdh solid $fontColor
              border-left: $bdw solid $fontColor
              -webkit-border-radius: 0 0 0 2px
              -moz-border-radius: 0 0 0 2px
              border-radius: 0 0 0 2px

            &:nth-of-type(4)
              bottom: 0
              right: 0
              border-bottom: $bdh solid $fontColor
              border-right: $bdw solid $fontColor
              -webkit-border-radius: 0 0 2px 0
              -moz-border-radius: 0 0 2px 0
              border-radius: 0 0 2px 0

          .tip-item-inner
            height: 100%
            padding-left: 20px
            line-height: 30px

          &:nth-of-type(1)
            .tip-item-font
              color #17d2e8

              .num
                color inherit

          &:nth-of-type(2)
            .tip-item-font
              color #02fbec

              .num
                color inherit

          &:nth-of-type(3)
            .tip-item-font
              color #065bf7

              .num
                color inherit

    .mid-animation
      position absolute
      top: 50%
      left: 50%
      transform translate(-50%, -50%)
      height: 300px;
      width: 100%;

      img
        &:nth-child(1)
          position absolute
          top: 0
          left: 50%
          transform translateX(-50%)
          z-index 10

        &:nth-child(2)
          position absolute
          top: 200px
          left: 50%
          transform translateX(-50%)

        &:nth-child(3)
          position absolute
          top: 300px
          left: 50%
          transform translateX(-50%)

    .count-wrapper-item
      text-align center
      flex 1
      background-color: #001739
      background-image: url('~@/assets/images/summary/data_bg.png')
      margin: 20px 3px
      padding-top: 10px
      padding-bottom: 10px

      img
        width 40px
        height auto
        margin: 10px auto

      i
        line-height: 26px

    .table
      margin-top: 10px
      padding-bottom: 14px

      .table-row
        line-height: 32px

        &:nth-child(odd)
          background-color: #001739

        span
          flex: 1
          text-align center
          color #ffffff
          padding 0 10px
          &:last-child
            display block
            width 120px
            text-align center
        &:nth-child(n+2)
          span:nth-child(2)
            color #00ccfe

        &:nth-child(n+2)
          span:nth-child(3)
            color #02d8cf

  .handle-date
    font-size: 12px
    white-space nowrap

    i, a
      font-size: 12px
      line-height: 28px

    .active
      background-color: #0d1b4d

    .tab
      padding: 0 10px;
      display inline-block
      white-space nowrap
      line-height: 28px
      height: 28px
      margin-right: 4px
      -webkit-border-radius: 14px
      -moz-border-radius: 14px
      border-radius: 14px
      cursor pointer

  .handle-date >>> .bin-select-dropdown
    background-color: #051028
    font-size: 12px

  .mask-cir-container
    position absolute
    z-index 2
    bottom: 60px
    left: 50%
    transform translateX(-50%)
    width: 800px
    height: 150px
    .mask-inner
      position relative
      // transform scale(10)
      /*
      &::before
        position absolute
        left: 50%;
        transform translateX(-50%)
        bottom: 10px;
        content: '';
        display: inline-block;
        width: 358px;
        height: 90px;
        background-color: rgba(5, 8, 25, 1);
        z-index: 2;
        border-radius: 200px 0 200px 0

       */
      .rotate-cir-1
        position absolute
        z-index 1
        width 80px
        height: 80px
        -webkit-border-radius: 50%
        -moz-border-radius: 50%
        border-radius: 50%
        border: 1px dashed #11387f
        left: 50%
        animation rotate linear 10s infinite
        text-align center
      .rotate-cir-2
        @extend .rotate-cir-1
        border-style solid
        animation shadow-light infinite linear 3s
        transform:translate(-50%,15px) rotateX(80deg) rotateZ(0) scale(10)

  @keyframes rotate {
    0% {
      transform: translate(-50%, -10px) rotateX(80deg) rotateZ(0) scale(10)
    }
    50% {
      transform: translate(-50%, -10px) rotateX(80deg) rotateZ(0.5turn) scale(10)
    }
    100% {
      transform: translate(-50%, -10px) rotateX(80deg) rotateZ(1turn) scale(10)
    }
  }

  @keyframes shadow-light {
    0% {
      box-shadow: 0 0 4px rgba(20, 140, 250, 0.2), 0 0 4px rgba(20, 140, 250, 0.2) inset
    }
    50% {
      box-shadow: 0 0 10px rgba(20, 140, 250, 0.5), 0 0 10px rgba(20, 140, 250, 0.5) inset
    }
    100% {
      box-shadow: 0 0 4px rgba(20, 140, 250, 0.2), 0 0 4px rgba(20, 140, 250, 0.2) inset
    }
  }

</style>
